<template>
  <div class="table">
    <div class="header">
      <slot name="header">
        <div class="title">{{ title }}</div>
        <div class="handler">
          <slot name="headerHandler"></slot>
        </div>
      </slot>
    </div>
    <el-table
      v-if="needHeight"
      v-loading="loadings"
      class="content"
      :cell-style="cellStyle"
      v-tableHeight="120"
      :data="tableData"
      @cell-click="cellClick"
      style="width: 100%"
    >
      <el-table-column v-if="showSelectColumn" type="selection" width="55" />
      <el-table-column v-if="showIndexColumn" type="index" width="50" label="序号" align="center"></el-table-column>
      <template v-for="(item, index) in currentKist" :key="item.prop">
        <el-table-column v-bind="item" v-if="item.show" align="center" :key="index" show-overflow-tooltip>
          <template v-if="!item.children" #default="scope">
            <!-- {{ cellClick }} -->
            <slot :name="item.slotName" :row="scope.row">{{ scope.row[item.prop] }}</slot>
          </template>
          <template v-if="item.children">
            <el-table-column v-bind="items" v-for="(items, indexs) in item.children" :key="items.prop">
              <template #default="scope">
                <slot :name="items.slotName" :row="scope.row">{{ scope.row[items.prop] }}</slot>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>

      <el-table-column v-if="zc" :minWidth="czWidth" label="操作" align="center">
        <template #default="scope">
          <slot name="handle" :row="scope.row"> </slot>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-else
      class="content"
      :cell-style="cellStyle"
      :data="tableData"
      @cell-click="cellClick"
      style="width: 100%"
    >
      <el-table-column v-if="showSelectColumn" type="selection" width="55" />
      <el-table-column v-if="showIndexColumn" type="index" width="50" label="序号" align="center"></el-table-column>
      <template v-for="(item, index) in currentKist" :key="item.prop">
        <el-table-column v-bind="item" v-if="item.show" align="center" :key="index" show-overflow-tooltip>
          <template v-if="!item.children" #default="scope">
            <!-- <slot :name="item.slotName" :row="scope.row">{{ scope.row[item.prop] }}</slot> -->
                        <el-tooltip :content="scope.row[item.prop]+'' "
              placement="top">
    <p class="descStyle">{{scope.row[item.prop] }}</p>
  </el-tooltip>
          </template>
          <template v-if="item.children">
            <el-table-column v-bind="items" v-for="(items, indexs) in item.children" :key="items.prop">
              <template #default="scope">
                <slot :name="items.slotName" :row="scope.row">{{ scope.row[items.prop] }}</slot>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
      <el-table-column v-if="zc" :minWidth="czWidth" label="操作" align="center">
        <template #default="scope">
          <slot name="handle" :row="scope.row"> </slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <slot name="footer"> </slot>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, watch, computed, inject, ref} from "vue"

export default defineComponent({
  props: {
    title: {
      type: String,
      default: "",
    },
    propList: {
      type: Array,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
    showIndexColumn: {
      type: Boolean,
      default: false,
    },
    showSelectColumn: {
      type: Boolean,
      default: false,
    },
    needHeight: {
      type: Boolean,
      default: true,
    },
    zc: {
      type: Boolean,
      default: true,
    },
    pageInfo: {
      type: Object,
      default: () => ({currentPage: 0, pageSize: 10}),
    },
    total: {
      type: Number,
      default: 0,
    },
    czWidth:{
      type: Number,
      default:150,
    },
  },
  emits: ["selectionChange", "update:pageInfo", "getClickHandle"],
  setup(props, {emit}) {
    watch(props.propList, val => {}, {deep: true})
    let currentKist: any = computed({
      get() {
        return props.propList
      },
      set(val) {
        // usedefineEmits('update:dialogVisible', val)
      },
    })
    let loading: any = inject("loading")
    let loadings = computed(() => {
      return loading.value
    })
    const handleSelectionChange = (val: any) => {
      emit("selectionChange", val)
    }
    let cellStyle = inject("cellStyle",null)
    function cellClick(row, column, cell, event) {
      let parmas = {
        row: row,
        column: column.property,
      }
      emit("getClickHandle", parmas)
    }
    return {
      handleSelectionChange,
      loadings,
      currentKist,
      cellStyle,
      cellClick
    }
  },
})
</script>

<style scoped>
.table {
  /* width: 98%; */
  /* padding: 20px; */
  /* border-top: 20px solid #f5f5f5; */
}
.header {
  margin: 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer {
  margin-top: 10px;
  width: 100%;
}
.descStyle {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
